<!--
 * @Description: 
 * @Date: 2022-06-30 10:17:53
 * @LastEditTime: 2022-07-05 16:59:43
 * @FilePath: \vue3\src\views\piniaTest.vue
-->
<template>
  <div>
    <div>firstName:{{ firstName }}</div>
    <div><button @click="change()">改变数据</button></div>
    <div>myName:{{ myName }}</div>
    <div><button @click="reset()">重置</button></div>
  </div>
</template>
<script>
import { reactive, ref } from "vue";
import { TestStore } from "../../store/index.js";
import { storeToRefs } from "pinia";
export default {
  setup() {
    let store = TestStore();
    let { firstName } = storeToRefs(store);
    //改变ref
    // let firstName = TestStore().firstName;
    let myName = ref(TestStore().firstName);

    console.log(TestStore().firstName + "---" + firstName);

    let change = () => {
      //单个修改
      // firstName.value = "你不认识的额名字"
      // myName.value="lalal"

      //  方法一
      // store.$patch({
      //   firstName :"我的老港",
      //   lastName : "给1一个",
      // })
      //方法一  函数形式
      // store.$patch((state) => {
      //   (state.firstName = "我的老港"), (state.lastName = "给1一个");
      // });
      //方法三 整体替换
      // store.$state = {
      //   firstName :"整体firstName",
      //   lastName :"整体lastName",
      // }
      //方法五 actions 修改
      store.setFirstName('我是修改后的名字');
      // console.log(store.getActionFirstName());
      console.log(
        TestStore().firstName + "---" + firstName.value + "--" + myName.value
      );
    };
    let reset = () => {
      // store.$reset()
      TestStore().$reset();
    };

    store.$subscribe((args, state) => {
      console.log(args, state);
    });
    return {
      firstName,
      myName,
      change,
      reset,
    };
  },
};
</script>
